<template>
    <div class="container">
        <div class="mui-input-row mui-search">
            <input type="search" class="mui-input-clear" placeholder="请输入要查询的用户ID" v-model="keywords">
        </div>

        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in search(keywords)" :key="item.account">
                <a href="javascript:">
                    <div class="mui-media-body">
                        用户ID：{{item.account}}
                        <div style="display: flex;justify-content: space-between">
                            <p class='mui-ellipsis'>门票ID：{{item.tick_id}}</p>
                            <p class='mui-ellipsis'>门票类型：{{item.ticket_typename}}</p>
                            <button class="mui-btn mui-btn-danger" @click="confirmDelete(item.account)" >删除</button>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
    import { MessageBox } from 'mint-ui'
    import { Toast } from 'mint-ui'

    export default {
        data(){
            return{
                datalist:[

                ],
                keywords:''
            }
        },
        created(){
            this.getDatalist();
        },
        methods: {
            getDatalist(){
                this.$http.get('DataList').then(result=>{
                    this.datalist = result.body;
                })
            },
            search(keywords){
                return this.datalist.filter(item => {
                    if(item.account.includes(keywords)){
                        return item;
                    }
                })
            },
            confirmDelete(account){
                MessageBox.confirm('确认删除?').then(action => {
                    if(action == 'confirm'){
                        this.$http.post('DelTicket', {
                            account:account,
                        } ).then(result => {
                            if(result.body.err_code === 0){
                                Toast({
                                    message: '删除成功',
                                    iconClass: 'fa fa-check fa-4x'
                                });
                                this.getDatalist();
                            }else{
                                console.log('未买票');
                                Toast({
                                    message: '未购买门票',
                                    iconClass: 'fa fa-times fa-4x'
                                });
                            }
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .container{
        margin: 5px;
    }
    /*.mui-media-body{*/
        /*display: flex;*/
        /*justify-content: space-between;*/
    /*}*/
</style>
